<template>
  <div class="system-manager-container">
    <el-tabs v-model="activeTabName" class="main-tabs">
      <el-tab-pane label="可预约时间管理" name="availability">
        <AvailabilitySettings />
      </el-tab-pane>
      <el-tab-pane label="群聊二维码管理" name="qrCode">
        <QrCodeSettings />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AvailabilitySettings from '@/components/system/AvailabilitySettings.vue'
import QrCodeSettings from '@/components/system/QrCodeSettings.vue'

const activeTabName = ref('availability')
</script>

<style scoped>
.system-manager-container {
  padding: 20px;
}
.main-tabs > :deep(.el-tabs__content) {
  padding: 20px;
}
</style>
